
.scenary_main{
    width: 60vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap:28px;
    text-align: center;
    .pic{
        filter: blur(5px);
        cursor: pointer;
        position: relative;
        height: 80vh;
        box-shadow: 8px;
        img{
            width: 100%;
            height: 100%;
        }
        .decoration_line{
            position: absolute;
            left: 0;
            top: 50%;
            z-index: 2;
            height: 2px;
            width:100%;
            background-color: #fff;
            transition: all ease-in-out 0.5s;
            opacity: 1;
        }
        .bi-fullscreen{
           transform: scale(0);
            left: 0;
            position: absolute;
            top:40%;
            width: 100%;
            color: #fff;
            transition: all ease-in-out 0.5s;
        }
   
       
          
    }
    @keyframes fade-in {
        0%{
            opacity: 0.6;
            filter:blur(5px) ;
        }
        75%{
            opacity: 0.8;
            filter: blur(2.5px);
        }
        100%{
            opacity: 1;
            filter: blur(0);
        }
    }
    .active{
        filter: blur(0);
        transition: all ease-in 0.5s;
        width: 400%;
        .decoration_line{
            display: none;
        }
        &:hover {
            animation: fade-in 0.8s ease-in-out;
            .bi-fullscreen{
                transform: scale(1);
                transition: all linear 0.5s;
            }
            .decoration_line{
                transition: all ease-in-out 0.5s;
            }
        }
        
    }
    .deactive{
        display: none;
    }
    
    
  
}